<template>
<!-- 大包装 -->
  <view class="wrapper">

    <!-- 搜索框 -->
    <GoSearch/>

    <!-- 主要内容 -->
    <view class="main">

      <!-- 左边导航栏 -->
      <view class="left">
        <view class="catItem" v-for="(name,index) in catTitleList" :key="name" @click="changeCat(index)">
          <view :class="{active:currentIndex === index}">
           {{name}}
          </view>
        </view>
      </view>
      <!-- 右边导航栏 -->
      <view class="right">
        <subCat v-for="item in subCatList" :key="item.cat_id" :data="item">
        </subCat>
      </view>

    </view>
  </view>
</template>

<script>
let categoryList=[]
import subCat from './components/SubCat.vue'
export default {
  components:{
    subCat
  },
  data () {
    return {
      catTitleList:[],
      subCatList:[],
      currentIndex:0
    }
  },
  onLoad(){
    this.getCategory()
  },
  methods:{
    async getCategory(){
      const{message}=await this.$u.get('/categories');
      categoryList=message;
      this.catTitleList=categoryList.map(item=>item.cat_name)
      this.subCatList=categoryList[this.currentIndex].children
    },
    changeCat(index){
      this.currentIndex=index
      this.subCatList=categoryList[this.currentIndex].children
    }
  }
}
</script>

<style lang="scss" scoped>
.wrapper{
  display: flex;
  flex-direction: column;
  height: 100vh;

  .main{
    flex: 1;
    display: flex;
    overflow: hidden;

    .left{
      width: 182rpx;
      overflow: auto;
      .active{
        border-left: 10rpx solid #EA4350;
        color: #EA4350;
        padding-right: 10rpx;
      }
      .catItem{
        font-size: 28rpx;
        text-align: center;
        padding: 35rpx 0;
      }
      
    }
    .right{
      flex: 1;
      overflow: auto;
    }
  }
}
</style> 